<!--  -->
<template>
  <div class="drawerBox dialog-editor-theme-template">
    <el-drawer title="主题管理" :visible.sync="dialogShow" ref="settingThemeTemplateDialog" :size="800" :before-close="close">
      <div class="dlg-main-box theme-template-set" v-if="dialogShow">
        <el-tabs v-model="activeName">
          <el-tab-pane label="主题模板" name="1">
            <DialogEditorThemeN :dialogClose="close" :isdrawer="isdrawer"/>
          </el-tab-pane>
          <el-tab-pane label="主题颜色" name="2">
            <DialogEditorThemeColorNN :dialogClose="close" :isdrawer="isdrawer"/>
          </el-tab-pane>
          <el-tab-pane label="官网模板" name="3">
            <DialogEditorTemplateN :dialogClose="close" :isdrawer="isdrawer"/>
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="manual-import">
          <span @click.stop="importTemplate">手动导入</span>
          <input style="display:none;" type="file" ref="file" name="" accept=".zip" @change="fileChange($event)" />
        </div> -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import DialogEditorThemeN from '@/components/common/design/dialog/templateTheme/DialogEditorThemeN.vue'
import DialogEditorThemeColorNN from '@/components/common/design/dialog/templateTheme/DialogEditorThemeColorNN.vue'
import DialogEditorTemplateN from '@/components/common/design/dialog/templateTheme/DialogEditorTemplateN'
import _ from 'lodash'
import { mapGetters } from 'vuex'
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  data () {
    return {
      dialogShow: false,
      loading: true,
      activeName: '1',
      isdrawer: true
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  methods: {
    show () {
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, '页面管理')
      PubSub.publish(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, '页面管理')
      this.dialogShow = true
    },
    // 关闭弹出层
    close () {
      this.activeName = '1'
      this.dialogShow = false
    },
    importTemplate () {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        type: 'warning',
        message: h('p', null, [
          h('span', null, '手动导入模板后，' + this.currentSite.language.name + '版数据将被 '),
          h('span', { style: 'color: red;font-weight:bold;' }, '覆盖，无法恢复'),
          h('span', null, ' , 是否继续?', '提示')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(action => {
        this.$refs['file'].click()
        this.dialogShow = false
      }).catch(() => {
      })
    },
    fileChange (event) {
      // 获取 files dom
      let files = event.target.files
      let file = files[0]
      let size = file.size
      let sz200M = 1024 * 1024 * 200
      if (size > sz200M) {
        this.$message({ message: '文件大小不能超过200M！', type: 'error' })
        if (this.$refs['file']) {
          this.$refs['file'].value = ''
        }
        if (event.target) {
          event.target.value = ''
        }
        return
      }

      // 创建form对象
      let param = new FormData()
      // 通过append向form对象添加数据
      param.append('file', file)

      // 发送
      this.$upload('/upload/handle-template', param, {
        begin: () => {
          // 开始时的操作
        },
        complete: (response) => {
          // 完成的操作
          // 获取到正在初始化的 s_config 的数据信息后通过改变 vuex 的状态，同时加入定时器，通过定时器校验状态是否改变回来
          if (response && response.id) {
            this.$store.dispatch('siteConfigChange', _.cloneDeep(response))
          }
          if (this.$refs['file']) {
            this.$refs['file'].value = ''
          }
          if (event.target) {
            event.target.value = ''
          }
        },
        progressEvent: (progressEvent) => {
          if (this.$refs['file']) {
            this.$refs['file'].value = ''
          }
          if (event.target) {
            event.target.value = ''
          }
        }
      })
    }
  },
  components: {
    DialogEditorThemeN,
    DialogEditorTemplateN,
    DialogEditorThemeColorNN
  }
}
</script>

<style scoped lang="scss">
.drawerBox /deep/ .el-drawer__header {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}
.theme-template-set {
  position: relative;
  padding: 0 20px;
}
.theme-template-set .manual-import {
  position: absolute;
  right: 20px;
  top: 11px;
  cursor: pointer;
  color: #258ffb;
}
</style>
